<template>
  <div>
    <el-form :model="addForm" :rules="rules" ref="refalert" label-width="100px">
      <el-form-item size="small" label="告警名称" prop="name">
        <el-input
          clearable
          v-model.trim="addForm.name"
          placeholder="请输入告警名称"
          maxlength="20"
          @input="onChange"
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item size="small" label="通知类型">
        <el-checkbox v-model="checked" @change="onChange">语音通知</el-checkbox>
        <el-checkbox v-model="checked2" @change="onChange"
          >短信通知</el-checkbox
        >
        <el-checkbox v-model="checked3" @change="onChange"
          >公众号通知</el-checkbox
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    services: {
      type: Array,
      default: () => [],
    },
    indexes: {
      type: Number,
      default: "",
    },
  },
  components: {},
  computed: {},
  data() {
    return {
      checked: true,
      checked2: true,
      checked3: true,
      addForm: {
        name: "",
        mobile_receive: 1,
        msg_receive: 1,
        mp_receive: 1,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入告警名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  created() {
    // console.log(this.services,'21312321');
    if (this.services.length == 0) return; //新增不走，编辑走下面赋值
    this.addForm.name = this.services[0].name;
    this.addForm.mobile_receive = this.services[0].mobile_receive;
    this.addForm.msg_receive = this.services[0].msg_receive;
    this.addForm.mp_receive = this.services[0].mp_receive;
    this.checked = this.services[0].mobile_receive == 1 ? true : false;
    this.checked2 = this.services[0].msg_receive == 1 ? true : false;
    this.checked3 = this.services[0].mp_receive == 1 ? true : false;
  },
  mounted() {},
  methods: {
    // validateForm() {
    //     return new Promise((resolve, reject) => {
    //     this.$refs.refalert.validate((valid) => {
    //       if (valid) {
    //         resolve();
    //       } else {
    //         reject(new Error('表单验证失败'));
    //       }
    //     });
    //   });
    //   this.$refs.refalert.validate((valid) => {
    //     if (valid) {
    //       console.log(1231);
    //       return true;
    //     } else {
    //       return false;
    //     }
    //   });
    // },
    onChange(e) {
      this.onalert();
    },
    // 更新数据
    onalert() {
      this.addForm.mobile_receive = this.checked ? 1 : 0;
      this.addForm.msg_receive = this.checked2 ? 1 : 0;
      this.addForm.mp_receive = this.checked3 ? 1 : 0;
      // console.log(this.addForm,'addForm111');
      // let list=[this.addForm]
      // console.log(list,'list1312321');
      this.$emit("onalert", this.addForm, this.indexes);
    },
  },
};
</script>

<style scoped lang="less"></style>
